<template>
  <div class="product-select" @click="state.open = true">
    <div class="product-name">
      <span v-if="productName">{{productName}}</span>
      <span class="color-gray" v-else>点击选择产品</span>
    </div>
    <div class="font-size-ssm"><down-outlined/></div>
  </div>
  <a-modal
    v-model:open="state.open"
    title="选择产品"
    :footer="null"
    :width="520"
    :body-style="{padding:0}"
    :mask="false">
    <a-row type="flex">
      <a-col flex="100px">
        <a-tabs tab-position="left"
                size="small"
                :tab-bar-style="{width:'100%',textAlign:'center'}"
                :style="{height:'320px'}" :tab-bar-gutter="0">
          <a-tab-pane :key="-1" tab="全部"/>
          <a-tab-pane v-for="item in 15" :key="item" :tab="'分类'+item"/>
        </a-tabs>
      </a-col>
      <a-col :flex="1">
        <div class="padding">
          <a-input-search placeholder="请输入产品名称" />
          <div class="product-list">
            <a-list></a-list>
          </div>
        </div>
      </a-col>
    </a-row>

  </a-modal>
</template>
<script setup lang="ts">
import {DownOutlined} from "@ant-design/icons-vue";
import {reactive, ref} from "vue";

const productName = ref<string>()

const state = reactive({
  open: false,
})

</script>
<style scoped>
  .product-select{
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 7px;
  }
  .product-select:hover{
    cursor: pointer;
  }
  :deep(.ant-tabs-left >.ant-tabs-nav .ant-tabs-tab){
    padding: 6px 6px 6px 20px;
    text-align: center;
  }
  :deep(.ant-tabs-left >.ant-tabs-nav .ant-tabs-tab.ant-tabs-tab-active){
    background-color: #e6f4ff
  }
</style>